<template>
		
		<div class="week">
			<div class="week-title">
				<span>周末去哪儿</span>
			</div>
			<ul class="week-content">
				<li class="week-content-li" v-for='item of list'>
					<div class="week-img-box">
						<img class="week-img" :src="item.weekImg" alt="">
					</div>
					<div class="week-info">
						<p class="product-name">{{item.productName}}</p>
						<p class="product-desc">{{item.productDesc}}</p>
					</div>
				</li>
			</ul>
		</div>
</template>
<script>
	export default{
		name:'HomeRecommend',
		props:{
			list:{
				type:Array,
				required:true
			}
		}
	}
</script>
<style lang="stylus" scoped>
@import '~@/assets/styles/global.styl'
	.week{
		margin-top: .2rem;
		background-color: #eee;
		font-size: .28em;
	}
	.week-title{
	    height: .8rem;
	    padding-left: .26rem;
	    line-height: .8rem;
	    color: #212121;
	}
	.week-content-li{
	    position: relative;
	    overflow: hidden;
	    background-color: #fff;
	}
	.week-img-box{
		width: 100%;
		height: 0;
		padding-bottom: 37.4375%
	}
	.week-img{
		width: 100%;
	}
	.week-info{
	    padding: .14rem .2rem .2rem .2rem;
	}
	.week-info .product-name{
	  	    overflow: hidden;
		    padding-right: 1.4rem;
		    color: #212121;
		    font-size: .28rem;
		    line-height: .48rem;
			ellipsis()
	}
	.week-info .product-desc{
		overflow: hidden;
	    padding-right: 1.4rem;
	    color: #616161;
	    font-size: .24rem;
	    line-height: .42rem;
		ellipsis()
	}
</style>
